<html>
<style>

body{
    /* background: #8abeb7; */
    text-align: left;
    overflow-x: scroll;
    font-family : "M+ 1m";
    font-size : 11px;
    display: flex;
    flex-direction: column;

}

scroll-bar{
    display: none;
}

::-webkit-scrollbar{
    display: none;
}

.main {
    /* height: 440px; */
    display:flex;
    flex-direction: row;
}

.editor{
    width: 400px !important;
}

.editor-display{
    padding: -1px !important;
    border: 1px solid !important;
    border-radius: 0px !important;
    background: rgb(0, 0, 0, 0.1) !important;
}

.text{
    display:block;
    position: relative;
    margin: 10px;
}

#canvas-container{
    margin: 10px;
    display:block;
    position: relative;
    border: 1px solid;
}

.points, .params {
  display: flex;
  flex-direction: column;
  margin: 10px;
  width: 400px;
}

.points, .params > input {
  margin-top: 5px;
}

.code {
  margin: 10px;
  resize: none;
  height: 300px;
  width: 400px;
  padding: 10px;

  font-family: 'TheSansMono';
}

</style>
<body>
    
  <div class="main">
    <div id="canvas-container"></div>
    <div id="points"></div>
    <div id="params"></div>
    <div id="indis"></div>
  </div>

  <textarea id='code' class='code'>
横:- :C-0
撇:- 0:DR=>F 1:DL @1
撇点:- 2:C 0:C 1C
  </textarea>

</body>

<script>

function randColor(alpha) {
  return `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${alpha})`
}

let canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    dpr = window.devicePixelRatio;
  
canvas.width  = 400 * dpr;
canvas.height = 400 * dpr;
canvas.style.width  = 400;
canvas.style.height = 400;
document.getElementById('canvas-container').appendChild(canvas);
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(dpr, dpr);
</script>

<script src="./torque.js" ></script>
<script src="./array-extend.js" ></script>
<script src="./vec.js" ></script>
<script src="./poly.js" ></script>
<script src="./polygon-cons.js" ></script>
<script src="./vecs.js" ></script>
<script src="./canvas-extend.js" ></script>
<script src="./frag.js" ></script>
<script src="./main.js" ></script>


</html>

